<template>
	<view class="reservation_apply">
		<xbd-pages-content title="我的预定">
			<template #content>
				<view class="content">
					<view class="choose">
						<view class="two">
							<xbd-select :carId.sync="type" :visible.sync="visible" :infoList="typeArr"
								@selectChoose="searchList">
								<template>
									<view class="select" @click="visible = true">
										<text> {{type || '全部状态'}} </text>
										<image class="image" src="../../static/images/health/right.svg" mode=""></image>
									</view>
								</template>
							</xbd-select>

							<uni-easyinput type="text" v-model="search" placeholder="搜索会议名称查询" />
							<view class="search" @click="clickSearch">
								<image class="image" src="../../static/images/performance/search.svg" mode=""></image>
							</view>
						</view>
						<text>共{{ total }}条</text>
					</view>
					<uni-list :border="false">
						<xbd-meet-card v-for="(item,index) in showList" :key="index" :myInfo="item"
							@clickMeetCard="details(item._id)"></xbd-meet-card>
							<xbd-null-list v-if="!showList.length"></xbd-null-list>
						<xbd-loading-more :status-num="statusNum" :is-load-more="isLoadMore"></xbd-loading-more>
					</uni-list>

				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import {
		Meeting
	} from '@/api/index.js';
	export default {
		data() {
			return {
				isSearch: false,
				visible: false,
				total: 0,
				search: '',
				statusNum: 0,
				isLoadMore: false,
				type: '',
				showList: [],
				typeArr: [{
						value: '0',
						label: '全部状态',
						state: ''
					},
					{
						value: '1',
						label: '待审批',
						state: '0'
					},
					{
						value: '2',
						label: '已通过',
						state: '1'
					},
					{
						value: '3',
						label: '已拒绝',
						state: '2'
					}
				],
				queryInfo: {
					type: 'my',
					status: '', //状态
					keyword: '', //关键字
					page: 0,
					perpage: 10
				}
			};
		},
		methods: {
			searchList(state) {
				this.queryInfo.status = state;
			},
			clickSearch() {
				this.queryInfo.keyword = this.search;
				this.queryInfo.page = 0;
				this.getList()
				this.isLoadMore = false;
			},

			loadmore() {
				if (this.visible) {

				} else {
					this.queryInfo.page++;
					this.statusNum = 1;
					this.isLoadMore = true;
					this.loadmoreList();
				}
			},
			async loadmoreList() {
				try {
					this.$showLoading('加载中');
					const res = await Meeting.getList(this.queryInfo);
					uni.hideLoading();
					if (res.success) {
						this.total = res.data.total;
						this.showList = this.showList.concat(res.data.list);
						if (res.data.list.length === this.queryInfo.perpage) {
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
						// this.isLoadMore = false;
					} else {
						this.queryInfo.page--;
						this.statusNum = 0;
					}
				} catch (e) {
					uni.hideLoading();
					this.queryInfo.page--;
				}
			},

			async getList() {
				try {
					this.$showLoading('加载中');
					const res = await Meeting.getList(this.queryInfo);
					this.showList = res.data.list
					this.total = res.data.total
					uni.hideLoading();
					if (res.data.list.length === this.queryInfo.perpage) {
						this.isLoadMore = true;
						this.statusNum = 2;
					}
				} catch (e) {
					uni.hideLoading();
				}
			},
			details(id) {
				uni.navigateTo({
					url: `./details?msg=1&id=${id}`,
				})
			},

		},
		onShow(){
			this.queryInfo.page = 0
			this.getList()
			// 强制刷新回到顶部
			uni.pageScrollTo({
			    scrollTop: 0,
			});
		},
		// 触底触发
		onReachBottom() {
			// 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list {
		background-color: #f8f8f8;
	}

	::v-deep .data-v-1a79304c {
		white-space: nowrap;
	}

	::v-deep .uni-easyinput__content {
		border-radius: 8rpx;
		min-height: 32px;
	}

	::v-deep .uni-input-wrapper {
		text-align: center;
		white-space: nowrap;
	}

	.choose {
		height: 105px;
		box-sizing: border-box;
		padding: 20px 50rpx;
		font-size: 14px;
		color: #999999;
		background-color: #FFFFFF;

		.two {
			display: flex;
			height: 32px;
			margin-bottom: 16px;

			.select {
				margin-right: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				white-space: nowrap;
				width: 220rpx;
				height: 32px;
				line-height: 32px;
				border-radius: 8rpx;
				border: 1px solid #E9ECF7;
				box-sizing: border-box;
				padding: 0 20rpx 0 20rpx;

				.image {
					transform: rotate(90deg);
					width: 38rpx;
					height: 38rpx;
				}
			}

			.search {
				margin-left: 20rpx;
				height: 32px;

				// align-items: center;
				.image {
					margin-top: 9px;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}

	.null {
		color: #999999;
		text-align: center;
		margin-top: 50rpx;
		font-size: 32rpx;
	}
</style>
